toggle-width = 25px
toggle-height = toggle-width * 0.8
toggle-line = 2px
transition-duration = 0.4s
lang-select-height = 40px

.mobile-nav
  position: fixed
  z-index: 11
  top: 0
  width: mobile-nav-width
  left: @width * -1
  height: 100%
  background: color-navy
  transition: transition-duration
  font-family: font-title
  .mobile-nav-on &
    transform: translateX(100%)

.mobile-nav-inner
  overflow-y: auto
  padding: 10px 0
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0
  -webkit-overflow-scrolling: touch

.mobile-nav-toggle
  position: absolute
  top: 0
  bottom: 0
  left: gutter-width
  width: toggle-width
  height: toggle-height
  margin: auto
  opacity: 0.5
  cursor: pointer
  transition: 0.2s
  &:active, .mobile-nav-on &
    opacity: 1
  @media mq-normal
    display: none

.mobile-nav-toggle-bar
  background: #fff
  position: absolute
  left: 0
  width: 100%
  height: toggle-line
  transition: transition-duration
  transform-origin: 0
  border-radius: toggle-line
  &:first-child
    top: 0
    .mobile-nav-on &
      transform: rotate(45deg)
  &:nth-child(2)
    top: (toggle-height - toggle-line) * 0.5
    .mobile-nav-on &
      opacity: 0
  &:last-child
    top: toggle-height - toggle-line
    .mobile-nav-on &
      transform: rotate(-45deg)

.mobile-search-btn
  position: absolute
  top: 0
  bottom: 0
  right: gutter-width
  margin: auto
  width: toggle-width
  height: @width
  transition: 0.2s
  opacity: 0.5
  &:before, &:after
    content: ""
    position: absolute
  &:before
    width: 18px
    height: @width
    border-radius: 50%
    border: toggle-line solid #fff
    top: 0
    left: 0
  &:after
    width: 9px
    height: toggle-line
    background: #fff
    top: 15px
    right: 0
    border-radius: toggle-line
    transform: rotate(45deg)
    transform-origin: 0
  &:active
    opacity: 1
  @media mq-normal
    display: none

.mobile-nav-link
  color: #fff
  text-decoration: none
  display: block
  padding: 10px 15px
  line-height: 1
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

.mobile-nav-title
  color: color-link
  font-weight: bold
  padding: 10px 15px
  line-height: 1
  display: block
  border-top: 1px solid #444
  margin-top: 10px
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis

.mobile-lang-select-wrap
  position: absolute
  bottom: 0
  left: 0
  width: 100%
  background: color-navy
  border-top: 1px solid #444
  display: none

.mobile-lang-select-label
  line-height: lang-select-height
  color: #fff
  padding: 10px 15px
  i
    opacity: 0.7
  span
    padding-left: 8px

.mobile-lang-select
  -webkit-appearance: menulist-button
  opacity: 0
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%

.container
  transition: transition-duration
  height: 100%
  .mobile-nav-on &
    transform: translateX(mobile-nav-width)
    overflow: hidden

.mobile-nav-dimmer
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: #000
  opacity: 0
  z-index:-1;
  pointer-events: none
  transition: opacity transition-duration 
  .mobile-nav-on &
    opacity: 0.7
    z-index: 9
    pointer-events: auto
    transition: opacity transition-duration
